<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
<!--只是加一个btn-group-->
<div class="btn-group" role="group">
    <button  type="button" class="btn btn-primary">123</button>
    <button  type="button" class="btn btn-primary">123</button>
    <button  type="button" class="btn btn-primary">123</button>
</div>
<!--btn-toolbar将其包裹起来，然后里面进行分组-->
<div class="btn-toolbar">
    <div class="btn-group btn-group-lg">
        <button type="button" class="btn btn-primary">234</button>
        <button type="button" class="btn btn-danger">123</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">234</button>
        <button type="button" class="btn btn-danger">123</button>

    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">234</button>
        <button type="button" class="btn btn-danger">123</button>
    </div>
</div>
<!--混合嵌套-->
<div class="btn-group">
    <button class="btn btn-primary">
        左
        <span class="glyphicon glyphicon-circle-arrow-left"></span>
    </button>
    <button class="btn btn-primary">
        中
        <span class="glyphicon glyphicon-adjust"></span>
    </button>
    <!--这有一个btngroup进行包裹-->
    <div class="btn-group">
        <button type="button" class="btn btn-primary" data-toggle="dropdown">
            下拉
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li class="dropdown-header">header</li>
            <!--disabled只对超链接的有用，，，-->
                <li class="disabled">123</li>
            <li class="disabled"><a href="#">123</a></li>
            <li class=""><a href="#">123</a></li>
        </ul>
    </div>
</div>
<hr>
<!--vertical这个类 高于btn-group 使得btn-group所在的一组button不能在一行。-->
<div class="btn-group-vertical">
    <button type="button" class="btn btn-default"> 12</button>
    <button type="button" class="btn btn-default"> 12</button>
    <div class="btn-group">
        <button class="btn btn-danger " type="button" data-toggle="dropdown">
            btn-danger
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li class="dropdown-header">header</li>
            <li><a href="http://www.baidu.com">123</a></li>
            <li class="disabled"><a href="http://www.baidu.com">123</a></li>
        </ul>
    </div>
    <button type="button" class="btn btn-default" role="group">btn-default</button>
    <!--竖直排放。-->
    <div class="btn-group">
        <button type="button" class="btn btn-success">btn-success</button>
        <button type="button" class="btn btn-primary">btn-primary</button>
    </div>
</div>
<hr>
<!--两段对齐的按钮，父类有btn-group-justified
    子类有btn-group包裹  然后里面才会有button标签。
-->
<div class="btn-group btn-group-justified" role="group">
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default btn-lg">btn-default</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default btn-lg">btn-default</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default btn-lg">btn-default</button>
    </div>
</div>
<hr>
<!--按钮式下拉菜单-->
<div class="btn-group">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
        btn-default
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li class="dropdown-header">header</li>
        <li><a href="#">123</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">123</a></li>

    </ul>
</div>
<hr>
<!--分裂式 下拉菜单
    一个btn-group组，然后 其中一个进行下拉设置。
-->
<h1>分裂式下拉菜单</h1>
<div class="btn-group dropdown">
    <button class="btn btn-default" type="button">dropdown</button>
    <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li class="dropdown-header">header</li>
        <li><a href="#">123</a></li>
        <li class="divider" role="separator"></li>
        <li><a href="#">a</a></li>
    </ul>
</div>
<!--在button的父级元素中加入dropup 向上弹出-->
<div class="btn-group dropup">
    <button class="btn btn-default" type="button">dropup</button>
    <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li class="dropdown-header">header</li>
        <li><a href="#">123</a></li>
        <li class="divider" role="separator"></li>
        <li><a href="#">a</a></li>
    </ul>
</div>



<script type="text/javascript" src="bootstrap/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<!--在这里写自己的js-->
</body>
</html>